<template>
    <el-menu active-text-color="#409eff" background-color="#304156" class="el-menu-vertical-demo" text-color="#fff"
        :collapse="isCollapse" :collapse-transition="true" router unique-opened :default-active="defUrl">
        <el-menu-item index="/index">
            <i class="iconfont homepage"></i>
            <span>首页</span>
        </el-menu-item>
        <el-sub-menu :index="'/' + item.name" v-for="item in menus" :key="item.id">
            <template #title>
                <i class="iconfont" :class="item.icon"></i>
                <span>{{ item.title }}</span>
            </template>
            <template v-for="(cItem) in item.children" :key="cItem.id">
                <el-menu-item :index="'/' + item.name + '/' + cItem.name" v-if="cItem.hidden === 0">
                    <i class="iconfont" :class="cItem.icon"></i>
                    {{ cItem.title }}
                </el-menu-item>
            </template>
        </el-sub-menu>

    </el-menu>
</template>

<script setup lang="ts">
import { useUserState } from "@/store/user"
import { ref, watchEffect } from "vue";
import { useRoute } from 'vue-router';
const { isCollapse } = defineProps(['isCollapse'])
const userStore = useUserState()
const menus = userStore.routes
const route = useRoute()
const defUrl = ref('./index')
watchEffect(() => (defUrl.value = route.path))
</script>

<style scoped lang="less">

</style>